<template>
  <el-form :inline="true">
    <el-form-item>
      <el-dropdown>
        <el-button type="primary">新建文档</el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="addDocument(1)">文件夹</el-dropdown-item>
            <el-dropdown-item @click="addDocument(2)">Excel文档</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-form-item>
  </el-form>
  <el-table :data="state.list" stripe border highlight-current-row height="calc(100% - 96px)">
    <el-table-column prop="title" label="名称" width="150"></el-table-column>
    <el-table-column prop="createdName" label="创建人" width="120"></el-table-column>
    <el-table-column prop="createdTime" label="创建时间" width="240"></el-table-column>
    <el-table-column prop="updatedName" label="更新人" width="120"></el-table-column>
    <el-table-column prop="updatedTime" label="更新时间" width="240"></el-table-column>
    <el-table-column label="类型">
      <template #default="scope">
        <el-tag :type="scope.row.type===1?'success':'danger'">{{ scope.row.typeLabel }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="warning" size="small" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteUserById(scope.row)">删除</el-button>
        <el-button type="danger" size="small" @click="disableAccount(scope.row)" v-if="scope.row.available===1">
          冻结
        </el-button>
        <el-button type="success" size="small" @click="enAbleAccount(scope.row)" v-if="scope.row.available===2">
          解封
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <commonDialog :title="state.title" v-model="state.showDialog" v-if="state.showDialog" @sure="save">
    <el-form>
      <el-form-item>
        <el-input type="text" :placeholder="state.title" v-model="request.title" :maxlength="50"></el-input>
      </el-form-item>
    </el-form>
  </commonDialog>
</template>

<script>
import { onMounted, ref } from 'vue'
import { post } from '@/utils/httpRequest'
import { addMySpaceUrl, queryMySpaceListUrl } from '@/api/space'
import { useRouter } from 'vue-router'

export default {
  name: 'mySpace',
  setup () {
    const router = useRouter()
    const state = ref({
      list: [],
      title: '',
      showDialog: false,
      placeholder: ''
    })
    const request = ref({
      title: null,
      type: 1
    })
    const addDocument = (type) => {
      request.value.type = type
      request.value.title = null
      switch (type) {
        case 1:
          state.value.title = '新建文件夹'
          state.value.placeholder = '请输入文件夹名称'
          state.value.showDialog = true
          break
        case 2:
          state.value.title = '新建excel文件'
          state.value.placeholder = '请输入excel名称'
          state.value.showDialog = true
          break
      }
    }
    const save = async () => {
      const result = await post(addMySpaceUrl, request.value)
      if (result.code === 200) {
        state.value.showDialog = false
        await querySpaceListAsync()
        switch (request.value.type) {
          case 1:
            break
          case 2:
            // eslint-disable-next-line no-case-declarations
            const excel = router.resolve({
              path: '/excel',
              query: {
                id: result.data
              }
            })
            window.open(excel.href, '_blank')
            break
        }
      }
    }
    const querySpaceListAsync = async () => {
      const result = await post(queryMySpaceListUrl, {})
      if (result.code === 200) {
        state.value.list = result.data
      }
    }
    onMounted(() => {
      querySpaceListAsync()
    })
    return {
      addDocument,
      request,
      save,
      state
    }
  }
}
</script>

<style scoped>

</style>
